Instituto Federal de São Paulo (IFSP)
Campus Bragança Paulista/SP

Análise e Desenvolvimento de Sistemas (ADS)

5o. módulo
Profa. Ana Paula Müller Giancoli
paulagiancoli@ifsp.edu.br


AULA 10 - FUNÇÕES, EVENTOS E DESENHANDO COM CANVAS

Agenda

1. Funções

function nomeFunção([argumentos])) {
    ... declarações
};

1.1. Exemplos

// ****************************
// Criando de forma literal 
// ****************************
let corOlhos = "azul";
function resetarCor() {
    corOlhos = "";
};
console.log(corOlhos);
resetarCor();
console.log(corOlhos);


// ****************************
// Armazenando em uma variável 
// ****************************
let corOlhos = "azul";
const funcao2 = function resetarCor() {
    return corOlhos = "";
};
console.log(corOlhos);
console.log("Função2: ", funcao2.resetarCor);
console.log(funcao2.corOlhos);

// Outro exemplo
let y = function() {
    ... 
};

// ****************************
// Armazenando em um array
// ****************************
let a = [ function(a, b) { 
            return 1+b; 
          }, funcao1, funcao2];

// ****************************
// Armazenando em um atributo de um objeto 
// ****************************
const obj = {}
obj.mostrar = function() {
    return "Hello"; 
};
console.log(obj.mostrar());

// ****************************
// Passando uma função como parâmetro 
// ****************************
function correr(funcao) {
    funcao()
}
correr(function() { console.log('Correndo...') });

// ****************************
// Uma função pode retornar/conter uma função 
// ****************************
function soma(a, b) {
    return function(c) {
        console.log(a + b + c);
    }
};
soma(2, 3)(4);

// ****************************
// Parâmetros e retornos são opcionais - Usando template string ${ } 
// ****************************
function area(larg, alt) {
    const area = larg * alt;
    if (area > 20) {
        console.log(`Valor ${area}m2 acima do permitido!`);
    } else {
        return area;
    }
}
console.log(area(2,2));
console.log(area(2));
console.log(area());
console.log(area(2, 3, 22, 44, 55));
console.log(area(5, 5));  

// ****************************
// Parâmetros variáveis 
// ****************************
function soma() {
    let soma = 0;
    for (i in arguments) {
        soma += arguments[i];
    }
    return soma;
}

console.log(soma(1, 2, 3));  
console.log(soma(1.1, 2.3, 3.6));  
console.log(soma());  
console.log(soma(1));  
console.log(soma(1, 2, "Teste"));

1.2. Funções Arrow

// **********Exemplo 1******************
let mult = function(a) {
    return 2 * a;
}
console.log(mult(2))  // 4

// **********Exemplo 2******************
mult = (a) => {
    return 2 * a;
 }
console.log(mult(5));

// **********Exemplo 3******************
mult = a => 2 * a
a => 2 * a
console.log(mult(4));

// **********Exemplo 4******************
(a) => {
    return 2 * a;
}


// Sem arrow funtcion
const nomes = [
    {id: 1, nome: "Ana"},
    {id: 2, nome: "Paula"},
    {id: 3, nome: "Ana"}
];

console.log(nomes.find(function(nome){
    return nome.nome === 'Ana'
}));


// Com arrow function
const nomes = [
    {id: 1, nome: "Ana"},
    {id: 2, nome: "Paula"},
    {id: 3, nome: "Ana"}
];

console.log(nomes.find((nome) => {
    return nome.nome === 'Ana'
}));


// Se for somente um parâmetro, pode remover os parenteses.
console.log(nomes.find(nome => {
    return nome.nome === 'Ana'
}));


// Ou ainda
console.log(nomes.find(nome => nome.nome === 'Ana');

// caso não tivesse parâmetro, utilizar parênteses vazios
console.log(nomes.find(() => nome.nome === 'Ana');

1.3. Funções imediatas

(function(){})();

// Exemplo 1
(function(){
    let nome = prompt("Indique seu nome: ");
    let x = 'Seja bem vindo,';
    console.log(x, nome);
})();

1.4. Exercícios

1.4.1. Exercício 1

maximo = prompt("Indique o numero: ");
exibirPrimo(maximo);

function exibirPrimo(maximo) {
    console.log("** Números primos entre 0 e", maximo, "**");
    for (let numero=2; numero <= maximo; numero++) {
        if (numeroPrimo(numero)) console.log(numero);
    }
}

function numeroPrimo(numero) {
    for (let divisor = 2; divisor < numero; divisor++) {
        if (numero % divisor === 0) {
            return false;
        }
    }
    return true;
}

1.4.2. Exercício 2

const nome = prompt("Informe seu nome completo: ")
let endereco = {
    logradouro : prompt("Indique o nome da rua: "),
    numero : prompt("Indique o número: "),
    bairro : prompt("Indique o bairro: "),
    cidade : prompt("Indique cidade: "),
}


function exibir(nome, endereco) {
    console.log(nome);
    for (let chave in endereco)
        console.log(chave, endereco[chave]);
}

exibir(nome, endereco);

1.5. Funções de Fábrica

Factory Function com hardcode

// Funcão criarCelular, com hardcode.
function criarCelular() {
    const celular = {
        marcaCelular: 'ASUS',
        tamanhoTela: {
            vertical: 155,
            horizontal: 75
        },
        capacidadeBateria: 5000,
        ligar: function() {
            console.log("Efetuando a ligação ...")
        }
    }
    return celular;
}
criarCelular();
console.log(celular);

Factory Function sem hardcode

```javascript // Funcão criarCelular, sem hardcode, usando padrão Factory Function. function criarCelular(marcaCelular, tamanhoTela, capacidadeBateria) { return { marcaCelular, tamanhoTela, capacidadeBateria, ligar() { console.log("Efetuando a ligação ..."); } } }

const celular1 = criarCelular('Zenfone', 5.5, 5000) console.log(celular1);

1.6. Funções de Construtores

// Construct Functions
function Celular(marcaCelular, tamanhoTela, capacidadeBateria) {
    this.marcaCelular = marcaCelular,
    this.tamanhoTela = tamanhoTela,
    this.capacidadeBateria = capacidadeBateria,
    this.ligar = function() {
        console.log("Efetuando ligação ...")
    }
}

const celular = new Celular('Zenfone', 5.5, 5000)
console.log(celular);

1.6.1. Exercício 3

// Construtor de Função
function Endereco(endereco) {
    this.logradouro = endereco.logradouro,
    this.numero = endereco.numero,
    this.bairro = endereco.bairro,
    this.cidade = endereco.cidade
}

// variável endereco1
let endereco1 = new Endereco({
    logradouro : prompt("Indique o nome da rua: "),
    numero : prompt("Indique o número: "),
    bairro : prompt("Indique o bairro: "),
    cidade : prompt("Indique cidade: "),
});

// variável endereco2
let endereco2 = new Endereco({
    logradouro : 'Avenida das margaridas',
    numero : '1987',
    bairro : 'Vila das Flores',
    cidade : 'Bragança Paulista'
});


// funcao para verificar se os endereços são iguais
function saoIguais(endereco1, endereco2) {
    // comparando propriedades
    return endereco1.logradouro === endereco2.logradouro && 
    endereco1.cidade === endereco2.cidade &&
    endereco1.numero === endereco2.numero
}
console.log(saoIguais(endereco1, endereco2))  // true: endereços possuem valores iguais. Digitei mesmos valores.
// Saída: true

function enderecoReferencia(endereco1, endereco2) {
    // comparando endereco de memoria - referencia
    return endereco1 === endereco2
}
console.log(enderecoReferencia(endereco1, endereco2)) // false: aponta para endereco de memoria diferentes
// Saída: false

// variável endereco3
const endereco3 = endereco1;

function enderecoReferencia1(endereco1, endereco3) {
    // comparando endereco de memoria - referencia
    return endereco1 === endereco3
}
console.log(enderecoReferencia1(endereco1, endereco3)) // true: aponta para o mesmo endereco de memoria 
// Saída: true

1.7. Objetos - Exercício 4

// criando o objeto
let x = 0;
let continuar = prompt("Deseja postar? S-Sim, N-Não: ").toUpperCase;


while (continuar != 'N') {
    let postagem = {
        titulo: prompt("Indique o título da postagem: "),
        mensagem: prompt("Informe a mensagem: "),
        autor: prompt("Indique o autor: ") ,
        visualizacoes: x +=1,
        comentarios: [
            { autor: prompt("Indique autor comentário1: "), mensagem: prompt("Informe a mensagem1: ")},
            { autor: prompt("Indique autor comentário2: "), mensagem: prompt("Informe a mensagem2: ")},
        ],
        estado: true
    };
    console.log(postagem);
    continuar = prompt("Deseja postar? S-Sim, N-Não: ").toUpperCase;
}

1.7.1. Exercício 5

let faixas1 = [
{
    tooltip : 'até R$ 700', 
    minimo : 0,
    maximo : 700,
},
{
    tooltip : 'R$ 700 até R$ 1000', 
    minimo : 700,
    maximo : 1000,
},
{
    tooltip : 'acima de R$ 1000', 
    minimo : 1000,
    maximo : 9999999999,
}
];

console.log(faixas1);


// Resolvendo com
// Usando Factory Function
function criarFaixaPreco(tooltip, minimo, maximo) {
    return {
        tooltip,
        minimo,
        maximo
    }
}

let faixas2 = [
    criarFaixaPreco('até R$ 700', 0, 700),
    criarFaixaPreco('R$ 700 até R$ 1000', 700, 1000),
    criarFaixaPreco('acima de R$ 1000', 1000, 9999999999),
]
console.log(faixas2);


// Resolvendo com
// Usando Contructor
function FaixaPrecos(tooltip, minimo, maximo) {
    this.tooltip = tooltip,
    this.minimo = minimo,
    this.maximo = maximo
}
let faixas3 = new FaixaPrecos('até R$ 700', 0, 700)
console.log(faixas3);

let faixas4 = new FaixaPrecos('R$ 700 até R$ 1000', 700, 1000)
console.log(faixas4);

let faixas5 = new FaixaPrecos('acima de R$ 1000', 1000, 9999999999)
console.log(faixas5);

1.7.2. Exercício 5 - Outra solução

let faixas1 = [
{
    tooltip : 'até R$ ', 
    minimo : 0,
    maximo : prompt("Indique o valor máximo: "),
},
{
    tooltip : 'R$ ', 
    minimo : 500,
    maximo : prompt("Indique o valor máximo para segunda pesquisa: "),
},
{
    tooltip : 'acima de R$ ', 
    minimo : 1000,
    maximo : 9999999999,
}
];

faixas1[0].tooltip += String(faixas1[0].maximo);

faixas1[1].tooltip += String(faixas1[0].maximo) + ' até R$ '+ String(faixas1[1].maximo);
faixas1[1].minimo = faixas1[0].maximo;

faixas1[2].tooltip += String(faixas1[1].maximo);
faixas1[2].minimo = faixas1[1].maximo;

console.log(faixas1);

2. Scripts JS

2.1. Utilizando o DOM

2.2. Utilizando Eventos

2.3. Utilizando Controle de Formulários

2.4. Carregamento do DOM e recursos

2.4.1. Ciclo de vida

2.4.2. Evento window.onload

<script>
  window.onload = function() { // same as window.addEventListener('load', (event) => {
    alert('Page loaded');

    // image is loaded at this time
    alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
  };
</script>

<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">

2.4.3. Evento window.onunload

2.5. Outros eventos

2.6. Biblioteca Math

Math.random()
Math.max(2,5,8,10,4)
Math.min(10,3,15,18)

3. Desenhando com canvas

3.1. Canvas

3.1.1. Estrutura básica do Canvas

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let context = canvas.getContext("2d");

  // Inserir seu código js aqui
};

3.1.2. Desenhando formas simples

Retângulos

Nome Função Descrição Retorno
clearRect(a, b, c, d) Limpa um retângulo específico. Não há retorno algum.
fillRect(a, b, c, d) Desenha um retângulo preenchido. Não há retorno algum.
strokeRect(a, b, c, d) Desenha um retângulo não preenchido. Não há retorno algum.

3.1.2.1. Exemplo de Linhas e Retângulos

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let x = 10;
  let y = 50;
  let count = 5;

  for (let i = 0; i < count; i++) {
    ctx.fillRect(i * (x + y) + x, x, y, y);
    ctx.strokeRect(i * (x + y) + x, (2 * x) + y, y, y);
    ctx.clearRect(i * (x + y) + x, x + 5, y, y - 10);
  }
};

Saída:

Definindo estilos

Nome Função Descrição Valores padrões
fillStyle Define o estilo utilizado para preencher as formas. black
lineJoin Define o estilo utilizado para uniões de linhas. miter
lineWidth Define a espessura das linhas. 1.0
strokeStyle Define o estilo utilizado para linhas. black

3.1.2.2. Exemplo com Espessuras de Linhas

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  ctx.lineWidth = 4;
  ctx.strokeRect(10, 10, 50, 50);
  ctx.lineWidth = 6;
  ctx.strokeRect(70, 10, 50, 50);
  ctx.lineWidth = 8;
  ctx.strokeRect(130, 10, 50, 50);
  ctx.lineWidth = 10;
  ctx.strokeRect(190, 10, 50, 50);
};

Saída:

3.1.2.3. Exemplo com Junções de Linhas

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  ctx.lineWidth = 20;
  ctx.lineJoin = "round";
  ctx.strokeRect(20, 20, 100, 100);
  ctx.lineJoin = "bevel";
  ctx.strokeRect(160, 20, 100, 100);
  ctx.lineJoin = "miter";
  ctx.strokeRect(300, 20, 100, 100);
};

Saída:

3.1.2.4. Exemplo com Preenchimento

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let x = 10;
  let y = 50;
  let count = 5;
  ctx.lineWidth = 3;
  let interiorCores = ["black", "blue", "gray", "red", "green"];
  let linhasCores = ["rgb(0, 0, 0)", "rgb(100, 100, 100)", "rgb(0, 0, 255)", "rgb(255, 0, 0)", "rgb(0, 255, 0)"];

  for (let i = 0; i < count; i++) {
    ctx.fillStyle = interiorCores[i];
    ctx.strokeStyle = linhasCores[i];
    ctx.fillRect(i * (x + y) + x, x, y, y);
    ctx.strokeRect(i * (x + y) + x, (2 * x) + y, y, y);
};

Saída:

Definindo Gradientes

Nome Função Descrição Retorno
createLinearGradient(x0, y0, x1, y1) Cria um gradiente linear. CanvasGradient
createRadialGradient(x0, y0, r0, x1, y1, r1) Cria um gradiente radial. CanvasGradient
addColorStop(position, cor) Adiciona cores sólidas a linhas gradientes. Não retorna nada.

3.1.2.5. Exemplo com Gradientes Linear

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createLinearGradient(0, 0, 500, 140);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  ctx.fillStyle = gradiente;
  ctx.fillRect(0, 0, 500, 140);
};

Saída:

3.1.2.6. Exemplo com Gradientes Radial

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  ctx.fillStyle = gradiente;
  ctx.fillRect(0, 0, 500, 140);
};

Saída:

3.1.2.7. Exemplo com Gradientes Linear e Radial

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createLinearGradient(250, 70, 200, 160);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  ctx.fillStyle = gradiente;
  ctx.fillRect(150, 20, 75, 100);
  ctx.lineWidth = 8;
  ctx.strokeStyle = gradiente;
  ctx.strokeRect(250, 20, 75, 100);

  let gradienteR = ctx.createRadialGradient(250, 150, 20, 200, 100, 100);
  gradienteR.addColorStop(0, "green");
  gradienteR.addColorStop(0.3, "blue");
  gradienteR.addColorStop(0.5, "white");
  gradienteR.addColorStop(0.7, "orange");
  gradienteR.addColorStop(1, "red");
  ctx.fillStyle = gradienteR;
  ctx.fillRect(150, 150, 75, 100);
  ctx.lineWidth = 8;
  ctx.strokeStyle = gradienteR;
  ctx.strokeRect(250, 150, 75, 100);
};

Saída:

Definindo Padrões

Nome Função Descrição
createPattern(imagem, repeticao) Cria um padrão conforme a imagem passada.
repeat A imagem será repetida na vertical e horizontal.
repeat-x A imagem será repetida somente na horizontal.
repeat-y A imagem será repetida somente na vertical.
no-repeat A imagem será repetida não será repetida.

3.1.2.8. Exemplo com Padrões

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <img src="bola.jpg" hidden id="bola">    <!-- Adicionado -->
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let imagemElemento = document.getElementById("bola");
  let padrao = ctx.createPattern(imagemElemento, "repeat");  /* propriedade a ser modificada */
  ctx.fillStyle = padrao;
  ctx.fillRect(0, 0, 500, 140);
};

Saída:
let padrao = ctx.createPattern(imagemElemento, "repeat");

let padrao = ctx.createPattern(imagemElemento, "repeat-x");

let padrao = ctx.createPattern(imagemElemento, "repeat-y");

let padrao = ctx.createPattern(imagemElemento, "no-repeat");

3.1.2.9. Exemplo com Padrões em formas geométricas

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <img src="bola.jpg" hidden id="bola">    <!-- Adicionado -->
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let imagemElemento = document.getElementById("bola");
  let padrao = ctx.createPattern(imagemElemento, "repeat");
  ctx.fillStyle = padrao;
  ctx.fillRect(50, 16, 180, 165);
  ctx.lineWidth = 20;
  ctx.strokeStyle = padrao;
  ctx.strokeRect(350, 20, 175, 150);

};

Saída:

Salvando e Restaurando Estados

Nome Função Descrição
save() Salva os valores para as propriedades do estado do desenho e os organiza na pilha de estados.
restore() Pega o primeiro conjunto de valores da pilha de estados e os utiliza para definir o estado de desenho.

3.1.2.10. Exemplo com Save e Restore

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <canvas id="myCanvas" width="578" height="300"></canvas>
  <div>                                 <!-- Adicionado -->
    <button>Save</button>               <!-- Adicionado -->
    <button>Restore</button>            <!-- Adicionado -->
  </div>                                <!-- Adicionado -->  
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
    border: thin solid black;
    margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");

  /* Inserir seu código aqui */
  let gradiente = ctx.createLinearGradient(500, 0, 500, 140);
  gradiente.addColorStop(0, "green");
  gradiente.addColorStop(0.3, "blue");
  gradiente.addColorStop(0.5, "white");
  gradiente.addColorStop(0.7, "orange");
  gradiente.addColorStop(1, "red");
  let interiorCores = ["black", gradiente, "blue", "gray", "red", "green", "grey"];
  let indexador = 0;
  ctx.fillStyle = interiorCores[indexador];
  draw();
  let botoes = document.getElementsByTagName("button");
  for (let i = 0; i < botoes.length; i++) {
    botoes[i].onclick = botaoPress;
  }

  function botaoPress(e) {
    switch (e.target.innerHTML) {
      case 'Save':
        ctx.save();
        indexador = (indexador + 1) % interiorCores.length;
        ctx.fillStyle = interiorCores[indexador];
        draw();
        break;

      case 'Restore':
        indexador = Math.max(0, indexador-1);
        ctx.restore();
        draw();
        break;
    }
  }

  function draw() {
    ctx.fillRect(0, 0, 500, 140);
  }
};

Saída:

DrawImage

Nome Função Descrição
drawImage(imagem, x, y) Desenha a imagem a partir das coordenadas (x, y).
Existem outras combinações para drawImage().
Os 3o. e 4o. parâmetros opcionais do método drawImage() controlam a escala da imagem.

3.1.2.11. Exemplo com Desenhando Imagens a partir de Video

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>  <!-- Modificado! -->
    <video id="vid" src="timessquare.webm" controls preload="auto" width="360" height="240"></video>
    <div>
        <button id="pressme">Tirar Foto</button>
    </div>
    <canvas id="myCanvas" width="360" height="240"></canvas>

  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css   -   Modificado */  
canvas {
  border: thin solid black;
}
/* elementos filhos diretos do elemento body receberão esta configuração */
body > * {
  float: left;
}
/* Arquivo js.js - Modificado */
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
  let imagemElemento = document.getElementById("vid");

  /* Inserir seu código aqui */
  document.getElementById("pressme").onclick = function (e) {
    ctx.drawImage(imagemElemento, 0, 0, 360, 238);
  }
};

Saída:

3.1.2.12. Exemplo com Desenhando Imagens sobre um Video

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>  <!-- Modificado! -->
  <video id="vid" src="timessquare.webm" controls auto width="360" height="240"></video>
  <canvas id="myCanvas" width="360" height="240"></canvas>

<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css   -   Modificado */  
canvas {
  border: thin solid black;
}
/* elementos filhos diretos do elemento body receberão esta configuração */
body > * {
  float: left;
}
/* Arquivo js.js - Modificado */
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
  let imagemElemento = document.getElementById("vid");

  /* Inserir seu código aqui */
  let width = 100;
  let height = 10;
  ctx.lineWidth = 5;
  ctx.strokeStyle = "red";

  setInterval(function () {
    ctx.drawImage(imagemElemento, 0, 0, 360, 238);
    ctx.strokeRect(180 - (width/2), 120 - (height/2), width, height);
  }, 25);

  setInterval(function () {
    width = (width + 1) % 200;
    height = (height + 3) % 200;
  }, 100);
};

Saída:

3.1.2.13. Exemplo Unindo as variações anteriores

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>  <!-- Modificado! -->
  <div>
    <video id="vid" src="timessquare.webm" controls autoplay width="360" height="240"></video>
  </div>
  <div>
    <canvas id="myCanvas1" width="360" height="240"></canvas>
    <button id="pressme">Foto</button>
    <canvas id="myCanvas2" width="360" height="240"></canvas>
  </div>
  <script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css   -   Modificado */  
canvas {
  border: thin solid black;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Arquivo js.js - Modificado */
  let srcCanvas = document.getElementById("myCanvas1");
  let ctx1 = srcCanvas.getContext("2d");
  let ctx2 = document.getElementById("myCanvas2").getContext("2d");
  let imagemElemento = document.getElementById("vid");

  document.getElementById("pressme").onclick = takePicture;

  /* Inserir seu código aqui */
  let width = 100;
  let height = 10;
  ctx1.lineWidth = 5;
  ctx1.strokeStyle = "red";
  ctx2.lineWidth = 30;
  ctx2.strokeStyle = "black";

  setInterval(function () {
    ctx1.drawImage(imagemElemento, 0, 0, 360, 240);
    ctx1.strokeRect(180 - (width/2), 120 - (height/2), width, height);
  }, 25);

  setInterval(function () {
    width = (width + 1) % 200;
    height = (height + 3) % 200;
  }, 100);

  function takePicture() {
    ctx2.drawImage(srcCanvas, 0, 0, 360, 240);
    ctx2.strokeRect(0, 0, 360, 240);
  }
};

Saída:

Criando caminhos Path

Nome Função Descrição
beginPath() Inicia um novo caminho.
closePath() Fecha um caminho existente da primeira linha desenhada até a última.
fill() Preenche as formas de subpaths.
isPointInPath(x, y) Retorna verdadeiro se o ponto existe no caminho da forma desenhada.
lineTo(x, y) Desenha uma subPath com as coordenadas indicadas.
moveTo(x, y) Posiciona o cursor na coordenada especidicada.
rect(x, y, w, z) Desenha um retângulo com início nos pontos (x, y), e com final nas coordenadas (w, z).
stroke() Desenha a linha externa das formas.

Outras Propriedades

Nome Função Descrição
font = "bold 12px sans-serif" Pode ser qualquer coisa que você colocaria na regra font do CSS.
Incluindo font style, font variant, font weight, font size, line height, e font family.
textAlign = "right" Controla o alinhamento do texto. É parecido (mas não idêntico) a regra text-align do CSS.
Os possíveis valores são start, end, left, right, e center.
textBaseline = "bottom" Controla onde o texto é desenhado relativo ao ponto de início.
Os possíveis valores são top, hanging, middle, alphabetic, ideographic, ou bottom.
fillText(conteudo, posicao x, posicao y) desenha o texto de fato.

3.1.2.14. Exemplo Desenhando Linhas

<!-- Arquivo index.html  - Modificado -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Desenhando com Canvas</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
    <canvas id="myCanvas" width="500" height="600">Sem suporte a canvas</canvas>
    <script src="js/js1.js"></script>
</body>
</html>
/* Arquivo estilo.css   -   Modificado */  
#myCanvas {
      border : 10px solid #555
    }
/* Arquivo js.js - Modificado */
    let canvas = document.getElementById("myCanvas1");
    let ctx = canvas.getContext("2d");

    //Desenhando linhas verticais
    for (let x = 0.5; x < 500; x += 10)
    {
      ctx.moveTo(x, 0);
      ctx.lineTo(x, 600);
    }
    //Desenhando linhas horizontais
    for (let y = 0.5; y < 600; y += 10)
    {
      ctx.moveTo(0, y);
      ctx.lineTo(600, y);
    }

    ctx.strokeStyle = "#eee";
    ctx.stroke();

    // Desenhando uma seta na Horizontal
    ctx.beginPath();
    ctx.moveTo(0, 40);
    ctx.lineTo(240, 40);
    ctx.moveTo(260, 40);
    ctx.lineTo(500, 40);
    ctx.moveTo(495, 35);
    ctx.lineTo(500, 40);
    ctx.lineTo(495, 45);

    // Desenhando uma seta na Vertical
    ctx.moveTo(60, 0);
    ctx.lineTo(60, 153);
    ctx.moveTo(60, 173);
    ctx.lineTo(60, 375);
    ctx.moveTo(65, 370);
    ctx.lineTo(60, 375);
    ctx.lineTo(55, 370);

    ctx.strokeStyle = "#000";
    ctx.stroke();


    //Desenhando x, y, e as coordenadas
    ctx.font = "bold 12px sans-serif";
    ctx.fillText("x", 248, 43);
    ctx.fillText("y", 58, 165);

    ctx.textBaseline = "top";
    ctx.fillText("( 0 , 0 )", 8, 5);

    ctx.textAlign = "right";
    ctx.textBaseline = "bottom";
    ctx.fillText("( 500 , 375 )", 492, 370);
};

Saída:

3.2. Animação com Javascript

4. Usando XML com CSS

<!-- Arquivo index.xml --> 

<?xml version="1.0"?>
<!-- XML demonstration -->

<?xml-stylesheet type="text/css" href="estilo.css"?>

<!DOCTYPE planet>
<planet>

<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>

<ocean>
<name>Atlantic</name>
<area>87,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Pacific</name>
<area>180,000</area>
<depth>4,000</depth>
</ocean>

<ocean>
<name>Indian</name>
<area>75,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Southern</name>
<area>20,000</area>
<depth>4,500</depth>
</ocean>

</planet>
/* Arquivo estilo.css */
/* ** XML demonstration ** */

planet:before {
  display: block;
  width: 8em;
  font-weight: bold;
  font-size: 200%;
  content: "Oceans";
  margin: -.75em 0px .25em -.25em;
  padding: .1em .25em;
  background-color: #cdf;
  }

planet {
  display: block;
  margin: 2em 1em;
  border: 4px solid #cdf;
  padding: 0px 1em;
  background-color: white;
  }

ocean {
  display: block;
  margin-bottom: 1em;
  }

name {
  display: block;
  font-weight: bold;
  font-size: 150%;
  }

area {
  display: block;
  }

area:before {
  content: "Area: ";
  }

area:after {
  content: " million km\B2";
  }

depth {
  display: block;
  }

depth:before {
  content: "Mean depth: ";
  }

depth:after {
  content: " m";
  }

Saída:

Referências

Perguntas


ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.

</div> </div>